import React, { Component } from "react";
import { connect } from "react-redux";
import "./WalletInfo.scss";
import MainLayout from "../../../component/mainLayout/mainLayout";
import { Tabs, Toast } from "antd-mobile";
import { channelCode, InterfaceG } from "../../../config/Config";
import yhTools from "../../../tools/yh";
import { ThemeLife } from "../../../tools/theme";
const tabs = [
	{ title: "存入规则" },
	{ title: "计息规则" },
	{ title: "支取规则" }
];

class WalletInfo extends Component {
	constructor(props) {
		super(props);
		this.state = {
			loadStatus: "1", // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）

			tabBarUnderlineStyle: {},

			dataObj: {
				advanceRate: 4.5,
				drawDate: "",
				bankPayType: 0,
				bankName: "",
				bankDrawType: "",
				channelCode: "",
				channelName: "",
				increasedMoney: 0,
				minMoney: 0,
				productId: "",
				productName: "",
				productType: 1,
				productDetail: "",
				rate: 0,
				residueLot: 0,
				saleStatus: 1,
				saleStatusDesc: "",
				term: 0,
				termUnit: 1,
				openStatus: 1,
				productLabel: [],
				storeRule: [],
				profitRule: [],
				drawRule: []
			}
		};
	}

	componentDidMount() {
		console.log(51, this.props.match.params.productId);
		this.getInitData();
	}

	getInitData() {
		let objs = {
			url: InterfaceG.productDetails,
			params: {
				channelCode: channelCode,
				productId: this.props.match.params.productId,
				type: "1" //类型 ：0-列表，1-详情
			},
			_alertShow: false
		};
		Toast.loading("加载中...", 100);
		let _that = this;
		yhTools.request(objs).then(res => {
			console.log(125, JSON.stringify(res));
			Toast.hide();
			if (res.code === "0") {
				_that.setState({
					dataObj: res.data
				});
			} else {
				Toast.info(res.message, 2);
			}
		});
	}

	render() {
		const headerParams = {
			header: {
				title: "产品信息"
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles,
			loadStatus: this.state.loadStatus // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）
		};
		const { dataObj } = this.state;
		return (
			<MainLayout pageParams={headerParams} isScroll={false}>
				<div className="wallet-info-page">
					<div className="content">
						<div className="top-div">
							<div className="top-content">
								<div className="line-1">
									<div className="line-1-1">
										<div className="item">
											<div className="item-1">存款利率</div>
											<div className="item-2">{dataObj.rate}%</div>
										</div>
										<div className="item">
											<div className="item-1">派息周期</div>
											<div className="item-2 t-2">{dataObj.drawDate}</div>
										</div>
									</div>

									<div className="line-1-2">
										{dataObj.productLabel.map((item, i) => {
											return (
												<div
													className="item"
													style={ThemeLife.switch(
														{
															background: "rgba(248,38,45,0.15)"
														},
														{}
													)}
													key={i}
												>
													{item}
												</div>
											);
										})}
									</div>
								</div>
								<div className="line-2">
									<div className="line-2-1">
										<div className="item">
											<div className="item-1">开始计息</div>
											<div className="item-2">{dataObj.drawStartDate}</div>
										</div>
										<div className="item">
											<div className="item-1">
												{dataObj.productDetail == "A"
													? "观察期截止"
													: "开始派息"}
											</div>
											<div className="item-2">{dataObj.observeDateEnd}</div>
										</div>
									</div>
									<div className="line-2-2">
										<div
											className="circle"
											style={ThemeLife.switch(
												{
													background: "rgba(248,38,45,0.15)"
												},
												{}
											)}
										></div>
										<div className="line"></div>
										<div
											className="circle"
											style={ThemeLife.switch(
												{
													background: "rgba(248,38,45,0.15)"
												},
												{}
											)}
										></div>
									</div>
									<div className="line-2-3">
										<div className="item">{dataObj.drawStartDateLabel}</div>
										<div className="item">{dataObj.observeDateEndLabel}</div>
									</div>
								</div>
								<div className="line-3">
									<Tabs
										tabs={tabs}
										initialPage={0}
										onChange={this.tabsChange.bind(this)}
										animated={false}
										useOnPan={false}
										tabBarActiveTextColor={ThemeLife.switch(
											"#F82633",
											"#40B15D"
										)}
										tabBarUnderlineStyle={{
											left: "0%!important",
											backgroundColor: ThemeLife.switch("#F82633", "#40B15D")
										}}
									>
										<div className="item" key="id_1">
											{dataObj.storeRule.map((item, i) => {
												return (
													<div className="item-line" key={i}>
														<div className="item-title">{item.key}：</div>
														<span>{item.value}</span>
													</div>
												);
											})}
										</div>
										<div className="item">
											{dataObj.profitRule.map((item, i) => {
												return (
													<div className="item-line" key={i}>
														<div className="item-title">{item.key}：</div>
														<span>{item.value}</span>
													</div>
												);
											})}
										</div>
										<div className="item" key="id_3">
											{dataObj.drawRule.map((item, i) => {
												return (
													<div className="item-line" key={i}>
														<div className="item-title">{item.key}：</div>
														<span>{item.value}</span>
													</div>
												);
											})}
										</div>
									</Tabs>
								</div>
							</div>
						</div>
					</div>

					<div className="page-bottom">
						<div className="tips-1" onClick={this.gotoNext.bind(this)}>
							常见问题
						</div>
						<div className="tips-2">本服务由福建华通银行提供</div>
					</div>
				</div>
			</MainLayout>
		);
	}

	gotoNext() {
		this.props.history.push({
			pathname: `/xhbPorblem/${this.state.dataObj.productDetail}`
		});
	}
	getStr(str) {
		return str.replace(/\\/g, "");
	}

	tabsChange(e, i) {
		let left = i * 22 + "% +" + ` 0.5rem + ${i * 0.2}rem`;
		left = `calc(${left})`;
		document.getElementsByClassName(
			"am-tabs-default-bar-underline"
		)[0].style.left = left;
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps() {
	return {};
}

const ProductInfoPage = connect(
	mapStateToProps,
	mapDispatchToProps
)(WalletInfo);
export default ProductInfoPage;
